<!DOCTYPE html>
<html>
<head>
    <title>小鸡吃虾米</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; }
        .game-container { text-align: center; }
        .chicken { width: 50px; height: 50px; background-color: yellow; border-radius: 50%; }
        .rice { width: 20px; height: 20px; background-color: white; border-radius: 50%; margin: 10px; }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>小鸡吃虾米</h1>
        <div id="chicken"><div class="chicken" id="chick">🐔</div></div>
        <div id="rice-container"></div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chick = document.getElementById('chick');
            const riceContainer = document.getElementById('rice-container');
            let riceItems = [];
            let score = 0;
            let gameOver = false;

            // 简单游戏逻辑：用键盘上下左右键移动小鸡，点击虾米吃掉
            document.addEventListener('keydown', function(event) {
                if (gameOver) return;
                
                // Move chicken (simplified for example)
                switch(event.key) {
                    case 'ArrowUp': chick.style.top = (parseInt(chick.style.top || 0) - 10 > 0) ? (parseInt(chick.style.top || 0) - 10) + 'px' : '0px'; break;
                    case 'ArrowDown': chick.style.top = (parseInt(chick.style.top || 0) + 10 < window.innerHeight - 50) ? (parseInt(chick.style.top || 0) + 10) + 'px' : (window.innerHeight - 50) + 'px'; break;
                    case 'ArrowLeft': chick.style.left = (parseInt(chick.style.left || 0) - 10 > 0) ? (parseInt(chick.style.left || 0) - 10) + 'px' : '0px'; break;
                    case 'ArrowRight': chick.style.left = (parseInt(chick.style.left || 0) + 10 < window.innerWidth - 50) ? (parseInt(chick.style.left || 0) + 10) + 'px' : (window.innerWidth - 50) + 'px'; break;
                }
                
                // Randomly add rice as per user's '虾米' , using emojis for demo
                if (Math.random() < 0.1 && riceItems.length < 10) {
                    addRiceItem();
                }
                
                // Check if any rice is clicked
                riceItems.forEach(item => {
                    if (item.parentElement) {
                        const rect = item.getBoundingClientRect();
                        if (rect.left < (event.clientX + rect.left) < rect.right && 
                            rect.top < (event.clientY + rect.top) < rect.bottom) {
                            item.remove();
                            score++;
                        }
                    }
                });
            });

            function addRiceItem() {
                const rice = document.createElement('div');
                rice.className = 'rice';
                rice.id = 'rice' + Date.now(); // Unique ID
                rice.textContent = '🦐'; // Simple emoji instead of img<br>
                rice.style.position = 'absolute';
                rice.style.left = Math.random() * (window.innerWidth - 40) + 'px';
                rice.style.top = Math.random() * (window.innerHeight - 40) + 'px';
                riceContainer.appendChild(rice);
                riceItems.push(rice);
            }

            // Initialize with some rice items
            for (let i = 0; i < 5; i++) {
                setTimeout(addRiceItem, i * 500);
            }
        });
    </script>
</body>
</html>